<template>
  <div center>
    <el-form ref="info2" :inline="true" :rules="rules" :model="info" size="mini" label-position="right"
             label-width="150px">
      <el-form-item label="受检单位" prop="sjcdwmc">
        <el-input v-model="info.sjcdwmc" placeholder="请输入内容" :disabled="true"/>
      </el-form-item>
      <el-form-item label="项目编号" prop="xmbh">
        <el-input v-model="info.xmbh" placeholder="请输入内容" :disabled="true"/>
      </el-form-item>
      <el-form-item label="检测项目" prop="jcxm">
        <el-input v-model="info.jcxm" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="检测依据" prop="jcyj">
        <el-input v-model="info.jcyj" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="样品性状" prop="ypxz">
        <el-input v-model="info.ypxz" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="采样体积" prop="cytj">
        <el-input v-model="info.cytj" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="收样日期" prop="syrq">
        <el-date-picker
          v-model="info.syrq"
          :disabled="isShow"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="检测日期-开始" prop="jcrq">
        <el-date-picker
          v-model="info.jcrq"
          :disabled="isShow"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="检测日期-结束" prop="jcrqend">
        <el-date-picker
          v-model="info.jcrqend"
          :disabled="isShow"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-row>
        <el-form-item label="标准曲线" prop="bzqx">
          <el-input style="width: 600px;" v-model="info.bzqx" type="textarea" placeholder="请输入内容" :disabled="isShow"
                    :autosize="{minRows: 3,maxRows: 10}"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="样品处理" prop="ypcl">
          <el-input style="width: 600px;" v-model="info.ypcl" type="textarea" autosize :disabled="isShow"
                    placeholder="请输入内容" :autosize="{minRows: 3,maxRows: 10}"/>
        </el-form-item>
      </el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>检测条件</span>
        </div>
        <el-form-item label="工作波长(nm)" prop="jctj1">
          <el-input v-model="info.jctj1" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
        <el-form-item label="样品溶液体积(ml)" prop="jctj2">
          <el-input v-model="info.jctj2" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
        <el-form-item label="工作灯电流(mA)" prop="jctj3">
          <el-input v-model="info.jctj3" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
        <el-form-item label="光谱带宽(nm)" prop="jctj4">
          <el-input v-model="info.jctj4" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
        <el-form-item label="负高压(V)" prop="jctj5">
          <el-input v-model="info.jctj5" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
        <el-form-item label="燃气流量(ml/min)" prop="jctj6">
          <el-input v-model="info.jctj6" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
        <el-form-item label="燃烧器高度(mm)" prop="jctj7">
          <el-input v-model="info.jctj7" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
        <el-form-item label="燃烧器位置(mm)" prop="jctj8">
          <el-input v-model="info.jctj8" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>标准溶液</span>
        </div>
        <el-form-item label="编号" prop="bzrybh">
          <el-input v-model="info.bzrybh" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
        <el-form-item label="标准值" prop="bzrybzz">
          <el-input v-model="info.bzrybzz" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
        <el-form-item label="定值日期" prop="bzrydzrq">
          <el-date-picker
            v-model="info.bzrydzrq"
            :disabled="isShow"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="有效日期" prop="bzryyxrq">
          <el-date-picker
            v-model="info.bzryyxrq"
            :disabled="isShow"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>质控样</span>
        </div>
        <el-form-item label="加标量" prop="zlyj1">
          <el-input v-model="info.zlyj1" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
        <el-form-item label="测得量" prop="zlyl2">
          <el-input v-model="info.zlyl2" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
      </el-card>

      <el-divider></el-divider>
      <el-form-item v-if="!isShow">
        <el-button type="warning" size="mini" @click="addTable1(null,null)">添加</el-button>
      </el-form-item>
      <el-table key="table1" border :data="info.table1Json" style="width: 100%">
        <el-table-column
          prop="sampleNumber1"
          align="center"
          label="样品编号">
        </el-table-column>
        <el-table-column
          prop="value11"
          align="center"
          label="c (μg/ml)">
        </el-table-column>
        <el-table-column
          prop="value12"
          align="center"
          label="C (mg/m³)">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作" v-if="!isShow">
          <template slot-scope="scope">
            <el-button @click="addTable1(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="delTable1(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider></el-divider>
      <el-form-item label="检验员" prop="jyy">
        <el-select v-model="info.jyy" :disabled="isShow" multiple placeholder="请选择" :multiple-limit="2">
          <el-option
            v-for="item in userList"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="复核员" prop="fhy">
        <el-select v-model="info.fhy" :disabled="isShow" multiple placeholder="请选择" :multiple-limit="2">
          <el-option
            v-for="item in userList"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div style="text-align: center" v-if="!isShow">
      <el-button type="primary" size="small" @click="addOrEdit">保存</el-button>
    </div>
    <el-dialog :visible.sync="centerDialogVisible" append-to-body center width="80%">
      <el-form ref="tableInfo" :inline="true" :rules="rules" :model="tableInfo" size="mini" label-position="right"
               label-width="120px">
        <el-form-item label="样品编号" prop="sampleNumber1">
          <el-input v-model="tableInfo.sampleNumber1" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="c (μg/ml)" prop="value11">
          <el-input v-model="tableInfo.value11" placeholder="请输入内容" :disabled="isShow" @change="getValue12()"/>
        </el-form-item>
        <el-form-item label="C (mg/m³)" prop="value12">
          <el-input v-model="tableInfo.value12" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
        <el-button type="primary" size="mini" @click="addOrEditTable1">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import imgUpdate from '@/components/Upload/imgUpdate'
import {addOrEdit, getInfo} from '@/api/table/tableSix'
import {getUserList} from '@/api/system/sysUser'
import {getUserId} from '@/utils/auth'

export default {
  components: {
    imgUpdate
  },
  props: {
    noCreated: {
      type: Boolean,
      default: null
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      info: {},
      userId: getUserId(),
      userList: [],
      tableInfo: {},
      tableIndex: null,
      table1Id: null,
      centerDialogVisible: false,
      centerDialogVisible2: false,
      choosenProjectInfo: {
        name: null,
        childs: []
      },
      choosenNumberList: [],
      choosenNumberInfo: [],
      rules: {
        dzr: [{required: true, message: '请输入内容', trigger: 'chang'}],
        sjcdwptr: [{required: true, message: '请输入内容', trigger: 'chang'}],
        cyrq: [{required: true, message: '请选择日期', trigger: 'chang'}],
        dzrq: [{required: true, message: '请选择日期', trigger: 'chang'}],
        shr: [{required: true, message: '请选择内容', trigger: 'chang'}],
        jyy: [{required: true, message: '请选择内容', trigger: 'chang'}],
        fhy: [{required: true, message: '请选择内容', trigger: 'chang'}],
      }
    }
  },
  created() {
    this.getUserList()
    this.info.table1Json = []
  },
  methods: {
    getValue12() {
      if (this.tableInfo.v0value != null && this.tableInfo.Avalue != null) {
        this.tableInfo.value12 = parseFloat(this.tableInfo.value11 * this.tableInfo.Avalue / this.tableInfo.v0value).toFixed(2)
      }
    },
    selectChanges(event) {
      this.choosenNumberList.forEach((item, index) => {
        const name = item.name
        if (event === name) {
          this.tableInfo.value20 = item.volume
          return
        }
      })
    },
    // 新增或编辑表1
    addTable1(index, row) {
      this.tableIndex = index
      this.tableInfo = {
        value12: null,
        bzrybzz: 'μg/mL',
        zlyj1: 'μg/mL'
      }
      if (row != null) {
        this.tableInfo = row
      }
      this.centerDialogVisible = true
    },
    // 保存表1
    addOrEditTable1() {
      if (this.tableIndex == null) {
        this.info.table1Json.push(this.tableInfo)
      } else {
        this.info.table1Json.splice(this.tableIndex, 1, this.tableInfo)
      }
      this.centerDialogVisible = false
    },
    // 删除表1
    delTable1(index, row) {
      this.info.table1Json.splice(index, 1)
    },
    // 获取所有用户
    getUserList() {
      getUserList().then(response => {
        this.userList = response.data
      })
    },
    getInfo(id, table1Id) {
      getInfo(id, table1Id).then(response => {
        if (response.data.type == null) {
          response.data.ypcl = "将采过样的滤膜放入烧杯中，加入     ml消化液，盖上表面皿，在电热板上加热消解，保值温度在      ℃，至溶液无色透明近干为止，用      溶液定容至       ml。"
        }
        if (response.data.table1Json != null && response.data.table1Json != '') {
          response.data.table1Json = JSON.parse(response.data.table1Json)
        } else {
          response.data.table1Json = []
        }
        if (response.data.jyy != null && response.data.jyy != '') {
          response.data.jyy = JSON.parse(response.data.jyy)
          var ids = []
          for (let i = 0; i < response.data.jyy.length; i++) {
            ids.push(response.data.jyy[i].id)
          }
          response.data.jyy = ids
        } else {
          response.data.jyy = []
        }
        if (response.data.fhy != null && response.data.fhy != '') {
          response.data.fhy = JSON.parse(response.data.fhy)
          var ids = []
          for (let i = 0; i < response.data.fhy.length; i++) {
            ids.push(response.data.fhy[i].id)
          }
          response.data.fhy = ids
        } else {
          response.data.fhy = []
        }
        if (response.data.bzrybzz == null) {
          response.data.bzrybzz = 'μg/mL'
        }
        if (response.data.zlyj1 == null) {
          response.data.zlyj1 = 'μg/mL'
        }
        this.info = response.data
      })
    },
    addOrEdit: function () {
      this.$refs['info2'].validate((valid) => {
        if (valid) {
          addOrEdit(this.info.id, this.info.tableOneId, this.info.jcrq, this.info.jcrqend, this.info.syrq, 6, JSON.stringify(this.info.table1Json), JSON.stringify(this.info.jyy), JSON.stringify(this.info.fhy),
            this.info.ypbh, this.info.jcyj, this.info.jcxm, this.info.ypxz, this.info.jcbc, this.info.bzrybh, this.info.bzrybzz, this.info.bzrydzrq, this.info.bzryyxrq,
            this.info.zlyj1, this.info.zlyl2, this.info.zlyl3, this.info.bzqx, this.info.ypcl, this.info.cytj,
            this.info.jctj1, this.info.jctj2, this.info.jctj3, this.info.jctj4, this.info.jctj5, this.info.jctj6, this.info.jctj7, this.info.jctj8,
            this.info.fcgs1, this.info.fcgs2, this.info.fcgs3, this.info.fcgs4, this.info.bfs1, this.info.bfs2, this.info.bfs3, this.info.bfs4).then(response => {
            if (this.info.id == null) {
              // 新增
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            } else {
              // 编辑
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }
            this.$parent.$parent.getData()
            this.$parent.$parent.centerDialogVisible = false
          })
        }
      })
    },
    // 初始化
    init(id, table1Id) {
      this.getInfo(id, table1Id)
    }
  }
}
</script>

